<template>
  <div class="my-order-container">
    <van-nav-bar
      class="app-nav-bar"
      title="我的预约"
      left-arrow
      @click-left="$router.push('/')"
    />
    <div class="condition-wrapper">
      <van-dropdown-menu>
        <van-dropdown-item @change="patientChange" v-model="cardNo" :options="patientList" />
        <van-dropdown-item title="日期" ref="item">
          <div class="date-tag">订单提交日期</div>
          <van-field name="radio">
            <template #input>
              <van-radio-group v-model="radio" direction="horizontal" @change="changeRadio">
                <van-radio name=1>近一个月</van-radio>
                <van-radio name=2>近三个月</van-radio>
              </van-radio-group>
            </template>
          </van-field>
          <div class="date-tag">自定义</div>
          <van-cell title="选择多个日期" :value="date" @click="show = true" is-link />
          <van-calendar v-model="show" type="range" :min-date="minDate" :max-date="maxDate" @confirm="calendarOnConfirm"/>
          <div style="padding: 5px 16px;">
            <van-button type="danger" block round @click="onConfirm">
              确认
            </van-button>
          </div>
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div v-for="item in orderInfoList">
      <van-cell-group class="order-detail-wrapper" @click="toOrderInfoDetail(item.id)">
        <van-row class="first-wrapper">
          <van-col span="5">{{item.params.docname}}</van-col>
          <van-col span="4" offset="15">
            <span v-if="item.orderStatus==0">待支付</span>
            <span v-if="item.orderStatus==1">已超时</span>
            <span v-if="item.orderStatus==2">已付款</span>
            <span v-if="item.orderStatus==3">已退款</span>
            <span v-if="item.orderStatus==4">已就诊</span>
          </van-col>
        </van-row>
        <van-row class="second-wrapper">
          <van-col span="9">{{item.params.depname}}（门诊）</van-col>
          <van-col span="10">广东海洋大学医院</van-col>
        </van-row>

        <div class="orderInfo-container">
          <van-row class="orderInfo-wrapper">
            <van-col span="6">候诊时间</van-col>
            <van-col span="10">{{item.params.workTime}}</van-col>
          </van-row>
          <van-row class="orderInfo-wrapper">
            <van-col span="6">提交时间</van-col>
            <van-col span="10">{{item.createTime}}</van-col>
          </van-row>
          <van-row class="orderInfo-wrapper">
            <van-col span="6">提交来源</van-col>
            <van-col span="10">微信预约</van-col>
          </van-row>
        </div>

      </van-cell-group>
    </div>
    <div style="height: 48px"></div>
  </div>

</template>

<script>
import orderInfoApi from "@/api/orderInfo"
import patientApi from '@/api/patient'
import {mapState} from "vuex";

export default {
  name: "MyOrderIndex",
  data(){
    return{
      radio:'',
      cardNo: '',
      minDate: new Date(2022, 0, 1),
      maxDate: new Date(2024, 0, 31),
      show: false,
      patientList:[],
      orderInfoList:[],
      date:'',
      dateRange:[],
      searchObj:{}
    }
  },
  created() {
    this.init()
  },
  computed:{
    ...mapState(['user'])
  },
  mounted() {

  },
  methods:{
    async init(){
      await this.getPatient()
      await this.getOrderInfoByCardNo(this.searchObj)
    },
    async getPatient(){
      const{data:res} =await patientApi.findByUserId(this.user.userId)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      res.data.forEach((item,index)=>{
        this.patientList.push({'text':item.name,'value':item.cardNo})
      })
      this.cardNo = this.patientList[0].value
      this.searchObj.cardNo = this.cardNo
    },
    async getOrderInfoByCardNo(searchOBj){
      const {data:res} = await orderInfoApi.findByObj(searchOBj)
      if (res.code!==200){
        return this.$notify({type:'danger',message:'查询失败'})
      }
      this.orderInfoList = res.data
    },
    formatDate(date) {
      return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    },
    calendarOnConfirm(date) {
      this.searchObj.dateRange = date
      const [start, end] = date;
      this.show = false;
      this.date = `${this.formatDate(start)} - ${this.formatDate(end)}`;
    },
    async onConfirm(){
      this.$refs.item.toggle();
      await this.getOrderInfoByCardNo(this.searchObj)
    },
    changeRadio(val){
      const maxDate = new Date()
      const minDate = new Date()
      if (val==1){
        minDate.setMonth(minDate.getMonth()-1)
      }else{
        minDate.setMonth(minDate.getMonth()-3)
      }
      this.date = `${this.formatDate(minDate)} - ${this.formatDate(maxDate)}`
      this.searchObj.dateRange=[minDate,maxDate]
    },
    async patientChange(val){
      this.searchObj.cardNo = val
      //搜索对应的预约订单
      await this.getOrderInfoByCardNo(this.searchObj)
    },
    toOrderInfoDetail(id){
      this.$router.push({path:'/order/detail/',query:{'orderInfoId':id}})
    }
  }
}
</script>

<style lang="less" scoped>
.my-order-container{
  .condition-wrapper{
    .date-tag{
      font-size: 14px;
      margin: 10px 0 10px 10px;
    }
  }
  .order-detail-wrapper{
    margin-top: 10px;
    padding: 2px 4px 0 14px;
    .first-wrapper{
      font-size: 14px;
    }
    .second-wrapper{
      font-size: 14px;
      color: gray;
    }
    .orderInfo-container{
      margin-top: 20px;
      .orderInfo-wrapper{
        font-size: 15px;
        margin: 4px 0 4px 0;
      }
    }
  }
}

</style>
